// const chatForm = document.getElementById("chat-form");

// const socket = io();

// socket.on("message", (message) => {
//     console.log(message);

// });

// chatForm.addEventListener("submit", (e) => {
//     e.preventDefault();

//     const msg = e.target.elements.msg.value;

//     socket.emit('chatMessage', msg);
// });

function App() {
    this.rightPanel = document.querySelector(".right-panel");
    this.chatForm = document.getElementById("chat-form");
    this.msgInput = document.getElementById("msg");
    this.messageContainer = document.querySelector(".message-container");

    this.userList = [];
    this.name = "";
    this.room = "";

    this.socket = io();

    this.getParams();

    this.setRoom();

    this.joinRoom().listen();
}

App.prototype.outPutMessage = function (message) {
    const isMine = this.isMine(message);

    this.messageContainer.innerHTML += `
        <div class="d-flex ${
            isMine ? "justify-content-end" : "justify-content-start"
        } my-3">
            <div class="card w-30">
                <div class="card-body ${isMine ? "bg-success text-light" : ""}">
                    <div class="card-title">
                        <b>${isMine ? "我" : message.name} ${message.time}</b>
                    </div>
                    <div class="card-text">
                        ${message.content}
                    </div>
                </div>
            </div>
        </div>
    `;
    return this;
};

App.prototype.joinRoom = function () {
    this.socket.emit("joinRoom", { name: this.name, room: this.room });
    return this;
};

App.prototype.listen = function () {
    this.socket.on("chatMessage", (message) => {
        this.outPutMessage(message).scroll().clear();
    });

    this.socket.on("roomUsers", userList => this.setUserList(userList));

    this.chatForm.addEventListener("submit", (e) => {
        e.preventDefault();

        if (!this.valid()) {
            alert("请输入内容");
            return;
        }

        this.socket.emit("chatMessage", {
            content: this.msgInput.value,
            ...this.getParams(),
        });
    });
};

App.prototype.setRoom = function () {
    document.querySelector(".room-name").innerHTML = this.room;
};

App.prototype.setUserList = function (userList) {
    let listHtml = "";

    userList.map((user) => {
        listHtml += `<li class="list-group-item">${user.name}</li>`;
    });

    const userListEl = document.querySelector(".user-list");

    while(userListEl.childNodes.length > 3){
        userListEl.removeChild(userListEl.lastChild);
    }

    userListEl.innerHTML += listHtml;
};

App.prototype.valid = function () {
    return !!this.msgInput.value;
};

App.prototype.scroll = function () {
    this.rightPanel.scrollTop = this.messageContainer.scrollHeight;
    return this;
};

App.prototype.clear = function () {
    this.msgInput.value = "";
    this.msgInput.focus();
    return this;
};

App.prototype.isMine = function (message) {
    return this.name == message.name;
};

App.prototype.getParams = function () {
    const params = Qs.parse(location.search, { ignoreQueryPrefix: true });

    this.name = params.name;
    this.room = params.room;

    return params;
};

const app = new App();
